<template>
  <div ref="appWidth" style="position: relative;display: flex;flex-direction: column;align-items: center">
    <el-image
      class="indexImg"
      src="http://rzico.oss-cn-shenzhen.aliyuncs.com/portal/aboutUs.png"></el-image>
    <div style="position: relative;display: flex;flex-direction: column;justify-content: center;align-items: center"
         :style="{top: boxTop}">
      <div class="introduction_card" ref="cardHeight">
          <span class="introduction_card_content">
            厦⻔睿商⽹络科技有限公司是一家正在蓬勃发展的新兴高新科技企业，立于互联网+时代潮
头，借助大数据、云计算、物联网等信息技术，提供各行各业实体商业互联网+新零售运营技术
解决方案。
      公司拥有全国领先的互联网技术、移动互联网技术及 相关信息化应用技术， 已在厦⻔、合
肥、南京等地设立多个 技术研发中⼼，以自主研发的芸系列产品为核⼼，赋能⼴⼤ 实体商业与
整合资源，输出技术与模式，助力实体经济转型 发展。
      目前， 睿商科技已构建了技术咨询、平台建设、运营服务等三⼤业务体系， 涉及商超百货、
生鲜、饮用水、鲜奶、餐饮等多个⾏业。
          </span>
      </div>
      <video controls="controls" id="video" class="introduction_video"
             src="http://rzico.oss-cn-shenzhen.aliyuncs.com/1.mp4"></video>
      <div class="introduction_Title">
        <span class="introduction_Title_left">公司愿景：<span
          class="introduction_Title_right">以先进技术为驱动实现商业关系更快速、更广泛、更便捷的连接</span></span>
        <span class="introduction_Title_left">公司使命：<span class="introduction_Title_right">以先进技术为驱动实现商业速</span></span>
        <span class="introduction_Title_left">公司战略：<span
          class="introduction_Title_right">以先进技术为驱动实现商业关系更快速</span></span>
        <span class="introduction_Title_left">核心价值观：<span class="introduction_Title_right">以先、进技、为驱</span></span>
        <span class="introduction_Title_left">用人理念：<span class="introduction_Title_right">以先进技术为驱动实现商业</span></span>
        <span class="introduction_Title_left">产品理念：<span class="introduction_Title_right">以先、进技、术驱、动实</span></span>
        <span class="introduction_Title_left">服务理念：<span
          class="introduction_Title_right">以先进技术为驱动实现商业关系更快速、更广泛</span></span>
      </div>
      <div class="introduction_Members">
        <span class="introduction_Members_title">核心团队成员</span>
        <div class="introduction_Members_itemBox">
          <div class="introduction_Members_item">
            <el-image class="introduction_Members_item_img"></el-image>
            <span class="introduction_Members_item_name">大帅比</span>
            <span class="introduction_Members_item_subtitle">初级拾荒者</span>
          </div>
          <div class="introduction_Members_item">
            <el-image class="introduction_Members_item_img"></el-image>
            <span class="introduction_Members_item_name">大帅比</span>
            <span class="introduction_Members_item_subtitle">初级拾荒者</span>
          </div>
          <div class="introduction_Members_item">
            <el-image class="introduction_Members_item_img"></el-image>
            <span class="introduction_Members_item_name">大帅比</span>
            <span class="introduction_Members_item_subtitle">初级拾荒者</span>
          </div>
          <div class="introduction_Members_item">
            <el-image class="introduction_Members_item_img"></el-image>
            <span class="introduction_Members_item_name">大帅比</span>
            <span class="introduction_Members_item_subtitle">初级拾荒者</span>
          </div>
          <div class="introduction_Members_item">
            <el-image class="introduction_Members_item_img"></el-image>
            <span class="introduction_Members_item_name">大帅比</span>
            <span class="introduction_Members_item_subtitle">初级拾荒者</span>
          </div>
          <div class="introduction_Members_item">
            <el-image class="introduction_Members_item_img"></el-image>
            <span class="introduction_Members_item_name">大帅比</span>
            <span class="introduction_Members_item_subtitle">初级拾荒者</span>
          </div>
        </div>
      </div>
      <div class="introduction_Members">
        <span class="introduction_Members_title">大事记</span>
        <div class="introduction_catalogue">
          <div class="introduction_catalogue_box">
            <span class="introduction_catalogue_headerTitle">2013年：南京</span>
            <div class="introduction_catalogue_headerLine"></div>
            <span class="introduction_catalogue_title">
              以先进技术为驱动实现 商业关系更快速、更广 泛、更便捷的连接用技 术联结和赋能实体商业
            </span>
          </div>
          <div class="introduction_catalogue_box">
            <span class="introduction_catalogue_headerTitle">2013年：南京</span>
            <div class="introduction_catalogue_headerLine"></div>
            <span class="introduction_catalogue_title">
              以先进技术为驱动实现 商业关系更快速、更广 泛、更便捷的连接用技 术联结和赋能实体商业
            </span>
          </div>
          <div class="introduction_catalogue_box">
            <span class="introduction_catalogue_headerTitle">2013年：南京</span>
            <div class="introduction_catalogue_headerLine"></div>
            <span class="introduction_catalogue_title">
              以先进技术为驱动实现 商业关系更快速、更广 泛、更便捷的连接用技 术联结和赋能实体商业
            </span>
          </div>
          <div class="introduction_catalogue_box">
            <span class="introduction_catalogue_headerTitle">2013年：南京</span>
            <div class="introduction_catalogue_headerLine"></div>
            <span class="introduction_catalogue_title">
              以先进技术为驱动实现 商业关系更快速、更广 泛、更便捷的连接用技 术联结和赋能实体商业
            </span>
          </div>
        </div>
      </div>
      <span class="introduction_bottom_title">莆田餐巴•用技术联结和重构实体产业</span>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        boxTop: 0
      }
    },
    mounted() {
      var appWidth = this.$refs.appWidth.clientWidth
      if (appWidth > 0 && appWidth < 319) {
        this.boxTop = '-20px'
      } else if (appWidth > 320 && appWidth < 569) {
        this.boxTop = '-30px'
      } else if (appWidth > 570 && appWidth < 749) {
        this.boxTop = '-50px'
      } else if (appWidth > 750 && appWidth < 929) {
        this.boxTop = '-' + (this.$refs.cardHeight.clientHeight / 3) + 'px'
      } else if (appWidth > 930) {
        this.boxTop = '-' + (this.$refs.cardHeight.clientHeight / 2) + 'px'
      }
      window.onresize = () => {
        return (() => {
          var appWidth = this.$refs.appWidth.clientWidth
          if (appWidth > 0 && appWidth < 319) {
            this.boxTop = '-20px'
          } else if (appWidth > 320 && appWidth < 569) {
            this.boxTop = '-30px'
          } else if (appWidth > 570 && appWidth < 749) {
            this.boxTop = '-50px'
          } else if (appWidth > 750 && appWidth < 929) {
            this.boxTop = '-' + (this.$refs.cardHeight.clientHeight / 3) + 'px'
          } else if (appWidth > 930) {
            this.boxTop = '-' + (this.$refs.cardHeight.clientHeight / 2) + 'px'
          }
        })()
      }
    }
  }
</script>

<style scoped>
  .introduction_Title_left {
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #4D4D4D;
    line-height: 13px;
    margin-bottom: 4px;
  }

  .introduction_Title_right {
    font-size: 12px;
    font-family: Microsoft YaHei;
    color: #4D4D4D;
    line-height: 13px;
    font-weight: 400;
  }

  .introduction_Members_title{
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #4D4D4D;
  }
  .introduction_Members_item{
    width: 140px;
    height: 210px;
    background-color: white;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px;
  }
  .introduction_Members_item_img{
    width: 140px;
    height: 160px;
  }
  .introduction_Members_item_name{
    font-size: 14px;
    font-weight: bold;
    display: block;
    margin-top: 2px;
  }
  .introduction_Members_item_subtitle{
    font-size: 14px;
    margin-top: 2px;
    display: block;
  }
  @media screen and (min-width: 0px) and (max-width: 349px) {
    .indexImg {
      background: radial-gradient(black, transparent);
      display: block;
      z-index: -1;
    }

    .introduction_card {
      width: 90vw;
      box-shadow: 0px 0px 27px 0px rgba(98, 98, 98, 0.75);
      z-index: 1;
      background-color: white;
      padding: 20px;
    }

    .introduction_card_content {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #686868;
    }

    .introduction_video {
      width: 80vw;
      height: 50vw;
      background: radial-gradient(black, transparent);
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .introduction_Title {
      display: flex;
      flex-direction: column;
      width: 80vw;
    }
    .introduction_Members{
      width: 90vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 30px;
    }
    .introduction_Members_itemBox{
      width: 170px;
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
    }
    .introduction_bottom_title{
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #535353;
      margin-top: 30px;
    }
    .introduction_catalogue{
      width: 198px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-top: 10px;
    }
    .introduction_catalogue_box{
      width: 166px;
      /*height: 134px;*/
      display: flex;
      flex-direction: column;
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 20px;
    }
    .introduction_catalogue_headerTitle{
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      line-height: 24px;
    }
    .introduction_catalogue_headerLine{
      width: 50px;
      height: 2px;
      background-color: aqua;
      margin-top: 4px;
    }
    .introduction_catalogue_title{
      font-size: 16px;
      font-family: Microsoft YaHei;
      color: #4D4D4D;
      line-height: 24px;
      padding-top: 10px;
    }
  }
  @media screen and (min-width: 350px) and (max-width: 419px) {
    .indexImg {
      background: radial-gradient(black, transparent);
      display: block;
      z-index: -1;
    }

    .introduction_card {
      width: 90vw;
      box-shadow: 0px 0px 27px 0px rgba(98, 98, 98, 0.75);
      z-index: 1;
      background-color: white;
      padding: 20px;
    }

    .introduction_card_content {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #686868;
    }

    .introduction_video {
      width: 80vw;
      height: 50vw;
      background: radial-gradient(black, transparent);
      margin-top: 30px;
      margin-bottom: 30px;
    }

    .introduction_Title {
      display: flex;
      flex-direction: column;
      width: 80vw;
    }
    .introduction_Members{
      width: 90vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 30px;
    }
    .introduction_Members_itemBox{
      width: 340px;
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
    }
    .introduction_bottom_title{
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #535353;
      margin-top: 30px;
    }
    .introduction_catalogue{
      width: 198px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-top: 10px;
    }
    .introduction_catalogue_box{
      width: 166px;
      /*height: 134px;*/
      display: flex;
      flex-direction: column;
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 20px;
    }
    .introduction_catalogue_headerTitle{
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      line-height: 24px;
    }
    .introduction_catalogue_headerLine{
      width: 50px;
      height: 2px;
      background-color: aqua;
      margin-top: 4px;
    }
    .introduction_catalogue_title{
      font-size: 16px;
      font-family: Microsoft YaHei;
      color: #4D4D4D;
      line-height: 24px;
      padding-top: 10px;
    }
  }
  @media screen and (min-width: 420px) and (max-width: 519px) {
    .indexImg {
      background: radial-gradient(black, transparent);
      display: block;
      z-index: -1;
    }

    .introduction_card {
      width: 90vw;
      box-shadow: 0px 0px 27px 0px rgba(98, 98, 98, 0.75);
      z-index: 1;
      background-color: white;
      padding: 20px;
    }

    .introduction_card_content {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #686868;
    }

    .introduction_video {
      width: 80vw;
      height: 50vw;
      background: radial-gradient(black, transparent);
      margin-top: 30px;
      margin-bottom: 30px;
    }

    .introduction_Title {
      display: flex;
      flex-direction: column;
      width: 80vw;
    }
    .introduction_Members{
      width: 90vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 30px;
    }
    .introduction_Members_itemBox{
      width: 340px;
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
    }
    .introduction_bottom_title{
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #535353;
      margin-top: 30px;
    }
    .introduction_catalogue{
      width: 394px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-top: 10px;
    }
    .introduction_catalogue_box{
      width: 166px;
      /*height: 134px;*/
      display: flex;
      flex-direction: column;
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 20px;
    }
    .introduction_catalogue_headerTitle{
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      line-height: 24px;
    }
    .introduction_catalogue_headerLine{
      width: 50px;
      height: 2px;
      background-color: aqua;
      margin-top: 4px;
    }
    .introduction_catalogue_title{
      font-size: 16px;
      font-family: Microsoft YaHei;
      color: #4D4D4D;
      line-height: 24px;
      padding-top: 10px;
    }
  }
  @media screen and (min-width: 520px) and (max-width: 838px) {
    .indexImg {
      background: radial-gradient(black, transparent);
      display: block;
      z-index: -1;
    }

    .introduction_card {
      width: 60vw;
      box-shadow: 0px 0px 27px 0px rgba(98, 98, 98, 0.75);
      z-index: 1;
      background-color: white;
      padding: 20px;
    }

    .introduction_card_content {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #686868;
    }

    .introduction_video {
      width: 50vw;
      height: 30vw;
      background: radial-gradient(black, transparent);
      margin-top: 30px;
      margin-bottom: 30px;
    }

    .introduction_Title {
      display: flex;
      flex-direction: column;
      width: 50vw;
    }
    .introduction_Members{
      width: 60vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 30px;
    }
    .introduction_Members_itemBox{
      width: 510px;
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
    }
    .introduction_bottom_title{
      font-size: 31px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #535353;
      margin-top: 30px;
    }
    .introduction_catalogue{
      width: 394px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-top: 10px;
    }
    .introduction_catalogue_box{
      width: 166px;
      /*height: 134px;*/
      display: flex;
      flex-direction: column;
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 20px;
    }
    .introduction_catalogue_headerTitle{
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      line-height: 24px;
    }
    .introduction_catalogue_headerLine{
      width: 50px;
      height: 2px;
      background-color: aqua;
      margin-top: 4px;
    }
    .introduction_catalogue_title{
      font-size: 16px;
      font-family: Microsoft YaHei;
      color: #4D4D4D;
      line-height: 24px;
      padding-top: 10px;
    }
  }
  @media screen and (min-width: 839px) and (max-width: 1049px) {
    .indexImg {
      background: radial-gradient(black, transparent);
      display: block;
      z-index: -1;
    }

    .introduction_card {
      width: 60vw;
      box-shadow: 0px 0px 27px 0px rgba(98, 98, 98, 0.75);
      z-index: 1;
      background-color: white;
      padding: 20px;
    }

    .introduction_card_content {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #686868;
    }

    .introduction_video {
      width: 50vw;
      height: 30vw;
      background: radial-gradient(black, transparent);
      margin-top: 30px;
      margin-bottom: 30px;
    }

    .introduction_Title {
      display: flex;
      flex-direction: column;
      width: 50vw;
    }
    .introduction_Members{
      width: 60vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 30px;
    }
    .introduction_Members_itemBox{
      width: 510px;
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
    }
    .introduction_bottom_title{
      font-size: 31px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #535353;
      margin-top: 30px;
    }
    .introduction_catalogue{
      width: 786px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-top: 10px;
    }
    .introduction_catalogue_box{
      width: 166px;
      /*height: 134px;*/
      display: flex;
      flex-direction: column;
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 20px;
    }
    .introduction_catalogue_headerTitle{
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      line-height: 24px;
    }
    .introduction_catalogue_headerLine{
      width: 50px;
      height: 2px;
      background-color: aqua;
      margin-top: 4px;
    }
    .introduction_catalogue_title{
      font-size: 16px;
      font-family: Microsoft YaHei;
      color: #4D4D4D;
      line-height: 24px;
      padding-top: 10px;
    }
  }
  @media screen and (min-width: 1050px) and (max-width: 3290px) {
    .indexImg {
      background: radial-gradient(black, transparent);
      display: block;
      z-index: -1;
    }

    .introduction_card {
      width: 60vw;
      box-shadow: 0px 0px 27px 0px rgba(98, 98, 98, 0.75);
      z-index: 1;
      background-color: white;
      padding: 20px;
    }

    .introduction_card_content {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #686868;
    }

    .introduction_video {
      width: 50vw;
      height: 30vw;
      background: radial-gradient(black, transparent);
      margin-top: 30px;
      margin-bottom: 30px;
    }

    .introduction_Title {
      display: flex;
      flex-direction: column;
      width: 50vw;
    }
    .introduction_Members{
      width: 60vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 30px;
    }
    .introduction_Members_itemBox{
      width: 1020px;
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
    }
    .introduction_bottom_title{
      font-size: 31px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #535353;
      margin-top: 30px;
    }
    .introduction_catalogue{
      width: 786px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-top: 10px;
    }
    .introduction_catalogue_box{
      width: 166px;
      /*height: 134px;*/
      display: flex;
      flex-direction: column;
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 20px;
    }
    .introduction_catalogue_headerTitle{
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      line-height: 24px;
    }
    .introduction_catalogue_headerLine{
      width: 50px;
      height: 2px;
      background-color: aqua;
      margin-top: 4px;
    }
    .introduction_catalogue_title{
      font-size: 16px;
      font-family: Microsoft YaHei;
      color: #4D4D4D;
      line-height: 24px;
      padding-top: 10px;
    }
  }
</style>
